<template>
    <view class="content">

        <!-- <timetableBody></timetableBody> -->
        <!-- <cropper class="cropper" v-if="showCropper" selWidth="660rpx" selHeight="100%" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100vw;height:100vw;"> -->
        <!-- </cropper> -->
        <cropper ref="yhdslCropper" :quality="1" mode="scale" @uploadImg="uploadImg" :scale="1"></cropper>
        <MsgBox ref="msgBox"></MsgBox>
        <view class="container">
            <uni-popup ref="popup" background-color="#fff" @change="change">
                <button type="default" @click="changeAvatar()">更换头像</button>
                <button type="default" @click="this.$refs.popup.close()">取消</button>
            </uni-popup>
        </view>

        <modal v-if="showExit" title="退出" confirm-text="确定" cancel-text="取消" @cancel="showExit = false"
            @confirm="exitApp()">
            <span>确认退出吗？</span>
            <!-- <br /> -->
            <!-- <span>11111</span> -->
        </modal>


        <modal v-if="showChangeName" title="修改用户名" confirm-text="确定" cancel-text="取消" @cancel="showChangeName = false"
            @confirm="changeName()">
            <input type='text' placeholder="新用户名..." class="intext" v-model="newName" />
        </modal>

        <modal v-if="showChangeSlogan" title="修改签名" confirm-text="确定" cancel-text="取消" @cancel="showChangeSlogan = false"
            @confirm="changeSlogan()">
            <textarea class="sloganText" v-model="newSlogan" placeholder="新签名..." placeholder-class=""></textarea>
        </modal>

        <modal v-if="showChangeEmail" title="设置提醒邮箱" confirm-text="确定" cancel-text="取消" @cancel="showChangeEmail = false"
            @confirm="changeEmail()">
            <!-- <p>输入的邮箱将用于待办事项的提醒</p> -->
            <input type='text' placeholder="输入的邮箱将用于待办事项的提醒..." class="intext modal-email-input" v-model="newEmail" />
        </modal>

        <modal v-if="showAbout" title="关于" confirm-text="确定" @confirm="showAbout = false">
            <p>输入的邮箱将用于待办事项的提醒</p>
            <!-- <input type='text' placeholder="输入邮箱..." class="intext" v-model="newEmail" /> -->
        </modal>


        <view class="main">
            <view class="main-banner">
                <image src="./../../../static/homepage/feiji2.jpg" mode="widthFix" />
            </view>

            <view class="main-userdata">
                <view class="main-userdata-avatar">
                    <span @click="this.$refs.popup.open('bottom')"></span>
                    <image :src="userData.avatarUrl" mode="scaleToFill" />
                </view>
                <view class="main-userdata-username">
                    <span class="main-userdata-username-u">{{ userData.userName }}</span>
                    <span class="main-userdata-username-l" @click="showChangeName = true">
                        <image src="./../../../static/change.png" mode="scaleToFill" />
                    </span>
                </view>
                <view class="main-userdata-userid">
                    <span>{{ userData.userId }}</span>
                </view>
                <view class="main-userdata-slogan">
                    <span class="main-userdata-slogan-1" @click="OpenChangeSlogan()">
                        <p>{{ userData.userSlogan }}</p>
                    </span>


                </view>
                <!-- <button @click="clearAccess()">清除access</button>111 -->
            </view>
            <view class="main-about">
                <span @click="showChangeEmail = true"><img src="./../../../static/setting.png" alt="" srcset=""> 设置邮箱</span>
            </view>
            <view class="main-about">
                <span @click="showAboutMethod()"><img src="./../../../static/about.png" alt="" srcset=""> 关于</span>
            </view>

        </view>

        <view class="main-slogan">
            <p class="main-slogan-blue">成功是一种态度！</p>
            <p class="main-slogan-red">今天你学习了吗？</p>
        </view>

        <span class="main-logout">
            <span @click="showExit = true">退出</span>
        </span>

        <view class="bottom">
            <BottomNavigate></BottomNavigate>
        </view>
    </view>
</template>

<script>
import MsgBox from '../../../components/MsgBox/MsgBox.vue'
import base64 from "base-64"
import request2 from "@/request.js"

import { mapState, mapGetters } from 'vuex'
import timetableBody from './../../../components/timetable/timetableBody.vue'
import cropper from "./../../../components/yhdsl-cropper/yhdsl-cropper.vue"
export default {
    components: { MsgBox, timetableBody, cropper },
    onPullDownRefresh() {
        // uni.startPullDownRefresh();
        //下面是下拉刷新页面的相关代码
        //...
        uni.stopPullDownRefresh();
        this.refreshPage()
        this.$refs.msgBox.showMsg(2, "刷新成功");
    },
    data() {
        return {
            userData: {
                avatarUrl: "https://i1.hdslb.com/bfs/face/11a9d94474b2b1cc9bbbac95f2295de2af1da53e.jpg",
                userName: "Loading",
                userId: "ID Loading",
                userSlogan: ""
            },
            imgurl: "",
            show: false,
            showChangeName: false,
            showChangeSlogan: false,
            showExit: false,
            showChangeEmail: false,
            showAbout: false,
            newEmail: "",
            newSlogan: "",
            newName: "",
            showCropper: false,
            isChooseImg:false,
            timetableData: [
                // 第一周课表
                [
                    // 周一课表
                    [
                        // 节次 1-2 课表
                        [
                            // 课程 1
                            {
                                "title": "课程名称7",
                                "period": "56",
                                "credit": "3.5",
                                "time": "星期四第1-2节",
                                "location": "博学楼",
                                "week": 6,
                                "start": 1,
                                "duration": 2,
                                "weeks": [6]
                            },
                            // 冲突课程 2

                        ],
                        // 节次 3-4 课表
                        [

                        ],
                        // 节次 5-6 课表
                        [],

                    ],
                    // 周二课表
                    [],
                    // 周三课表
                    [],

                ],
                // 第二周课表
                [],
                // 第三周课表
                [],
            ]
        }
    },
    async onLoad() {

        this.refreshPage()


        // console.log(await request2("/timetable/", "GET"));
        // console.log(111);
        // // 设置开学时间
        // this.$store.commit('timetable/setStartDay', '2023/04/03 00:00:00')
        // // 初始化课表数据
        // this.$store.commit('timetable/setTimetableList', this.timetableData)
    },
    computed: {
        // ...mapState('timetable', [
        //     'showTimetableWeek',
        //     'bgImage'
        // ]),
        // ...mapGetters('timetable', [
        //     'originalWeekIndex',
        //     'currentWeekIndex',
        //     'weekWeekIndex'
        // ])
    },
    watch: {
        // currentWeekIndex(newVal, oldVal) {
        //     uni.setNavigationBarTitle({
        //         title: `第${newVal + 1}周课表`
        //     })
        // }
    },
    methods: {



        clearAccess() {
            uni.setStorageSync('login', { 'access': '123', 'refresh': uni.getStorageSync('login').refresh })

        },
        refreshPage() {
            this.userData.userName = uni.getStorageSync("userName") || this.userData.userName
            this.userData.avatarUrl = uni.getStorageSync("avatarUrl") || this.userData.avatarUrl
            this.userData.userSlogan = uni.getStorageSync("userSlogan") || this.userData.userSlogan
            uni.request({
                url: 'https://tomato.daoxuan.cc/name/',
                data: {},
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'GET',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    if (data.msg == "昵称未上传") {
                        this.userData.userName = "匿名用户"
                        uni.setStorageSync("userName", "匿名用户")
                    } else {
                        this.userData.userName = data.name || "匿名用户"
                        uni.setStorageSync("userName", data.name || "匿名用户")
                    }

                }
            })
            uni.request({
                url: 'https://tomato.daoxuan.cc/avator/',
                data: {},
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'GET',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    this.userData.avatarUrl = data.file_url || "https://i1.hdslb.com/bfs/face/11a9d94474b2b1cc9bbbac95f2295de2af1da53e.jpg"
                    uni.setStorageSync("avatarUrl", data.file_url || "https://i1.hdslb.com/bfs/face/11a9d94474b2b1cc9bbbac95f2295de2af1da53e.jpg")
                }
            })
            uni.request({
                url: 'https://tomato.daoxuan.cc/signature/',
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'GET',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    this.userData.userSlogan = data.signature || "设置个性签名..."
                    uni.setStorageSync("userSlogan", data.signature || "设置个性签名...")
                }
            })
            let idJson = JSON.parse(base64.decode(uni.getStorageSync("login").access.split(".")[1]))
            this.userData.userId = "ID " + idJson.username

            uni.request({
                url: 'https://tomato.daoxuan.cc/mail/',
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'GET',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    this.newEmail = data.mail
                }
            })

        },
        change(e) {
            this.show = e.show
        },
        showAboutMethod() {
            uni.showModal({
                title: '关于',
                content: '每羊学习助手喵~',
                showCancel: false,
                success: ({ confirm, cancel }) => {

                }
            })
        },
        changeName() {
            this.showChangeName = false
            uni.request({
                url: 'https://tomato.daoxuan.cc/name/',
                data: {
                    "name": this.newName
                },
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'POST',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    if (statusCode == 200) {
                        this.refreshPage()
                        this.$refs.msgBox.showMsg(2, "更换成功");
                    } else {
                        this.$refs.msgBox.showMsg(1, "更换失败");
                    }

                },
                fail: (error) => { }
            })

        },
        changeEmail() {
            let emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g
            if (emailRegExp.test(this.newEmail)) {
                uni.request({
                    url: 'https://tomato.daoxuan.cc/mail/',
                    data: { mail: this.newEmail },
                    header: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        "Authorization": "Bearer " + uni.getStorageSync('login').access

                    },
                    method: 'POST',
                    sslVerify: true,
                    success: ({ data, statusCode, header }) => {
                        console.log(data);
                        if (statusCode == 200) {
                            this.showChangeEmail = false
                            this.$refs.msgBox.showMsg(2, "设置成功")
                        } else {
                            this.$refs.msgBox.showMsg(1, "设置失败")

                        }
                    },
                    fail: (error) => { }
                })
            } else {
                this.$refs.msgBox.showMsg(1, "输入邮箱有误")
            }

        }
        ,
        changeSlogan() {
            this.showChangeSlogan = false
            uni.request({
                url: 'https://tomato.daoxuan.cc/signature/',
                data: {
                    "signature": this.newSlogan
                },
                header: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    "Authorization": "Bearer " + uni.getStorageSync('login').access
                },
                method: 'POST',
                sslVerify: true,
                success: ({ data, statusCode, header }) => {
                    if (statusCode == 200) {
                        this.refreshPage()
                        this.$refs.msgBox.showMsg(2, "更换成功");
                    } else {
                        this.$refs.msgBox.showMsg(2, "更换失败");
                    }

                },
                fail: (error) => { }
            })
        },
        OpenChangeSlogan() {
            this.newSlogan = this.userData.userSlogan == "设置个性签名..." ? "" : this.userData.userSlogan
            this.showChangeSlogan = true;
        },
        exitApp() {
            uni.removeStorageSync('login')
            uni.clearStorageSync()
            uni.reLaunch({ url: "pages/login/login", animationType: "none" });
        },
        uploadImg(res) {
            this.isChooseImg=false
            uni.getFileSystemManager().readFile({
                filePath: res,
                encoding: 'base64',
                success: res => {
                    this.$refs.popup.close('bottom')
                    // console.log("res", res.data);
                    // return res.data
                    uni.request({
                        url: 'https://tomato.daoxuan.cc/avator/',
                        data: {
                            "file": res.data
                        },
                        header: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            "Authorization": "Bearer " + uni.getStorageSync('login').access
                        },
                        method: 'POST',
                        sslVerify: true,
                        success: ({ data, statusCode, header }) => {
                            if (statusCode == 200) {
                                this.refreshPage()
                                this.$refs.msgBox.showMsg(2, "更换成功");
                            } else {
                                this.$refs.msgBox.showMsg(2, "更换失败");
                            }
                        },
                        fail: (error) => { }
                    })
                }
            })
        },
        changeAvatar() {
            this.isChooseImg=true;
            this.$refs.yhdslCropper.chooseImage();
            // uni.chooseImage({
            //     count: 1,
            //     success: (res) => {

            // uni.getFileSystemManager().readFile({
            //     filePath: res.tempFilePaths[0],
            //     encoding: 'base64',
            //     success: res => {
            //         this.$refs.popup.close('bottom')
            //         // console.log("res", res.data);
            //         // return res.data
            //         uni.request({
            //             url: 'https://tomato.daoxuan.cc/avator/',
            //             data: {
            //                 "file": res.data
            //             },
            //             header: {
            //                 Accept: 'application/json',
            //                 'Content-Type': 'application/json',
            //                 'X-Requested-With': 'XMLHttpRequest',
            //                 "Authorization": "Bearer " + uni.getStorageSync('login').access
            //             },
            //             method: 'POST',
            //             sslVerify: true,
            //             success: ({ data, statusCode, header }) => {
            //                 if (statusCode == 200) {
            //                     this.refreshPage()
            //                     this.$refs.msgBox.showMsg(2, "更换成功");
            //                 } else {
            //                     this.$refs.msgBox.showMsg(2, "更换失败");
            //                 }
            //             },
            //             fail: (error) => { }
            //         })
            //     }
            // })
            //     }
            // })

        },


    }
}
</script>

<style scoped>
.cropper {
    z-index: 110;
    position: fixed;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    display: flex;
}

.main {
    margin-bottom: 100rpx;
}

.main-banner {
    height: 356rpx;
    overflow: hidden;
}

.main-banner image {
    width: 100%;

}

.main-userdata {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.main-userdata-avatar {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    position: relative;
    transform: translateY(-50%);
    overflow: hidden;
    border: 3rpx solid rgba(100, 100, 100, 0.5);
}

.main-userdata-avatar image {
    width: 100%;
    height: 100%;
}

.main-userdata-avatar span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0);
}

.main-userdata-avatar span:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.main-logout span {
    border: none;
    background-color: #fff;
    width: 100%;
    height: 100rpx;
    color: rgb(230, 66, 64);
    font-family: Smiley Sans;
    border-radius: none;
    letter-spacing: 12rpx;
    position: fixed;
    bottom: 125rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-logout span:hover {
    background-color: rgb(158, 158, 158)}

.main-userdata-username-u {
    font-size: 50rpx;
    letter-spacing: 8rpx;
    color: #318BF7;
    font-family: Smiley Sans;
}

.main-userdata-username {
    display: flex;
    align-items: center;
    margin-top: -70rpx;
    position: relative;
}

.main-userdata-username-l {

    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: -50rpx;
}

.main-userdata-username-l image {
    width: 50rpx;
    height: 50rpx;
}

.main-userdata-userid {
    margin-top: 10rpx;
    font-size: 30rpx;
    letter-spacing: 5rpx;
    color: rgb(98, 171, 250);
    font-family: Smiley Sans;
}

.main-userdata-slogan {
    font-size: 25rpx;
    letter-spacing: 3rpx;
    color: rgb(98, 171, 250);
    font-family: Smiley Sans;
    padding: 10rpx 50rpx;
    margin: 50rpx;
}

.main-userdata-slogan:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.main-userdata-slogan p {
    text-align: center;
}

.sloganText {
    margin: 0px;
    width: 100%;
    padding: 20rpx;
    transform: translateX(-20rpx);
}

.main-about {}

.main-about image {
    width: 64rpx;
    height: 64rpx;
    margin-right: 20rpx;
}

.main-about span {
    display: flex;
    align-items: center;
    background-color: white;
    text-align: left;
    padding-left: 30rpx;
    height: 100rpx;
    font-family: Smiley Sans;
    letter-spacing: 12rpx;
    font-size: 42rpx;
    color: #318BF7;
    border: none;
    border-top: solid 12rpx #F0F0F0;
}

.main-about span:hover {
    background-color: #F0F0F0;
}

.main-slogan {
    transform: translateY(-30rpx);
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-slogan p {
    /* width: 100%; */
    display: inline;
    text-align: center;
    /* text-decoration: underline; */
    padding-bottom: 4rpx;
    /* text-underline-offset:7rpx; */
    font-family: Smiley Sans;
    font-size: 36rpx;
    letter-spacing: 12rpx;
    margin-top: 40rpx;

}

.main-slogan-blue {
    border-bottom: #318BF7 solid 2rpx;
    color: #318BF7;
}

.main-slogan-red {
    border-bottom: #E64240 solid 2rpx;
    color: #E64240;
}

.modal-email-input {
    margin-top: 20rpx;
}
</style>
